<template>
  <view class="custom-nav-bar" :class="themeClass" :style="navBarStyle">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏内容 -->
    <view class="nav-bar-content" :style="{ height: navBarHeight + 'px' }">
      <!-- 左侧内容 -->
      <view class="nav-left" @click="handleLeftClick">
        <view v-if="showBack" class="nav-back-container">
          <view class="nav-back">
            <uni-icons type="left" size="24" :color="iconColor"></uni-icons>
          </view>
          <text class="back-text" :style="{ color: titleColor }">返回</text>
        </view>
        <slot name="left"></slot>
      </view>
      
      <!-- 标题 -->
      <view class="nav-title">
        <text class="title-text" :style="titleStyle">{{ title }}</text>
        <slot name="title"></slot>
      </view>
      
      <!-- 右侧内容 -->
      <view class="nav-right" @click="handleRightClick">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/user'

export default {
  name: 'CustomNavBar',
  props: {
    title: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: true
    },
    customBackgroundColor: {
      type: String,
      default: ''
    },
    customTitleColor: {
      type: String,
      default: ''
    },
    fixed: {
      type: Boolean,
      default: true
    }
  },
  setup() {
    const userStore = useUserStore()
    return {
      userStore
    }
  },
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 44
    }
  },
  computed: {
    isDark() {
      return this.userStore?.themeMode === 'dark'
    },
    
    themeClass() {
      return this.isDark ? 'theme-dark' : 'theme-light'
    },
    
    backgroundColor() {
      if (this.customBackgroundColor) {
        return this.customBackgroundColor
      }
      // 使用渐变背景让二级页面更有层次感
      return (this.userStore?.themeMode === 'dark') ? '#2d2d30' : '#ffffff'
    },
    
    titleColor() {
      if (this.customTitleColor) {
        return this.customTitleColor
      }
      return (this.userStore?.themeMode === 'dark') ? '#e8e8e8' : '#333333'
    },
    
    iconColor() {
      return '#1890ff'
    },
    
    navBarStyle() {
      return {
        backgroundColor: this.backgroundColor,
        position: this.fixed ? 'fixed' : 'relative',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 999
      }
    },
    
    titleStyle() {
      return {
        color: this.titleColor
      }
    }
  },
  mounted() {
    this.getSystemInfo()
  },
  
  watch: {
    'userStore.themeMode': {
      handler(newTheme) {
        // Vue的响应式系统会自动处理更新
      },
      immediate: false
    }
  },
  methods: {
    getSystemInfo() {
      // 获取系统信息
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
      
      // #ifdef MP-WEIXIN
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      this.navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2
      // #endif
    },
    
    handleLeftClick() {
      if (this.showBack) {
        this.$emit('back')
        uni.navigateBack()
      }
      this.$emit('leftClick')
    },
    
    handleRightClick() {
      this.$emit('rightClick')
    }
  }
}
</script>

<style scoped>
.custom-nav-bar {
  width: 100%;
  transition: all 0.3s ease;
}

.theme-light {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.theme-dark {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  border-bottom: 1rpx solid #3d3d3d;
}

.status-bar {
  width: 100%;
}

.nav-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  position: relative;
}

.nav-left,
.nav-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 60rpx;
}

.nav-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.title-text {
  font-size: 36rpx;
  font-weight: 500;
}

.nav-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background-color: rgba(24, 144, 255, 0.1);
  border: 1rpx solid rgba(24, 144, 255, 0.2);
  flex-shrink: 0;
}

/* 增强点击区域的视觉反馈 */
.nav-left {
  min-height: 88rpx;
  padding: 12rpx 0;
}

.nav-back-container {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx 8rpx 8rpx;
  border-radius: 32rpx;
  transition: all 0.2s;
}

/* 浅色主题下的返回容器 */
.theme-light .nav-back-container {
  background-color: rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(0, 0, 0, 0.12);
}

.theme-light .nav-back-container:active {
  background-color: rgba(0, 0, 0, 0.15);
  transform: scale(0.98);
}

/* 深色主题下的返回容器 */
.theme-dark .nav-back-container {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.theme-dark .nav-back-container:active {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(0.98);
}

.back-text {
  font-size: 28rpx;
  font-weight: 500;
}
</style> 